<template>
  <div class="good-classify">
    <page-header
      v-bind="newClassifyHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="classifyContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #img="row">
        <el-image
          v-if="row[row.prop]"
          style="width: 40px; height: 40px"
          preview-teleported
          :src="row[row.prop]"
          :preview-src-list="[row[row.prop]]"
          :initial-index="0"
        />
      </template>
      <template #parentId>
        <el-tree-select
          v-model="parentId"
          :props="{ label: 'name', value: 'classifyId' }"
          @node-click="selectClassifyClick"
          :data="globalStore.entireClassify"
          :render-after-expand="false"
        />
      </template>
      <template #uploadImage>
        <upload-image
          v-if="
            currentParent?.classifyType === 1 ||
            usePageCommonStore().curRow.classifyType === 2
          "
        />
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { useGlobalStore, useGoodSkuStore, usePageCommonStore } from '@/store'
import PageHeader from '@/components/page-header/page-header.vue'
import PageContent from '@/components/page-content/page-content.vue'
import UploadImage from '@/components/upload-image/upload-image.vue'
import classifyHeaderConfig from '@/views/main/goods/goodClassify/config/header-config'
import classifyContentConfig from '@/views/main/goods/goodClassify/config/content-config'
import usePageHeader from '@/hooks/use-page-header'
import type { SingleBtnType } from '@/global/types'
import { SingleBtns } from '@/global/constant'
import classifyEditAndAddModalConfig from '@/views/main/goods/goodClassify/config/modal-edit-and-add'

const globalStore = useGlobalStore()
// ===================== 商户下拉框 ==============================
const goodSkuStore = useGoodSkuStore()
// 初始化商户下拉框配置
goodSkuStore.getMerchantListAction('').then(() => {
  const merchantIdObj = classifyHeaderConfig.form.items.find(
    (item) => item.prop === 'merchantId'
  )
  if (merchantIdObj) {
    merchantIdObj.options = goodSkuStore.merchantList
  }
})
const newClassifyHeaderConfig = computed(() => {
  return classifyHeaderConfig
})

// ======================== page-header ========================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ========================== page-content =========================
const singleBtnConfig = ref()
const parentId = ref() // 上级分类id
watchEffect(() => {
  parentId.value = usePageCommonStore().curRow.parentId
})
const currentParent = ref()

// 1.点击单操作按钮
const singleBtnClick = (type: SingleBtnType) => {
  if (type === SingleBtns.Edit || type === SingleBtns.Add) {
    singleBtnConfig.value = classifyEditAndAddModalConfig
  }
  pageContentRef.value?.setModalStatus(true)
}

// 子传父
// 2.点击表单框的确定按钮
const handleConfirmClick = (
  type: SingleBtnType,
  updateInfo: (info: any) => void
) => {
  if (type === SingleBtns.Edit || type === SingleBtns.Add) {
    updateInfo({
      parentId: parentId.value,
      merchantId: -1
    })
  }
  singleBtnConfig.value = null
}
const handleCancelClick = () => {
  singleBtnConfig.value = null
}

// 3.选择上级分类
const selectClassifyClick = (nodeObj) => {
  currentParent.value = nodeObj
  parentId.value = nodeObj.classifyId
  usePageCommonStore().curRow.classifyType = nodeObj.classifyType + 1
}
</script>

<style scoped lang="less">
.good-classify {
}
</style>
